<template>
  <div v-show=" !data.parent|| data.children  || data.expanded == true">
    <span v-if="data.children" @click="expand(data)" :class="data.expanded ? 'tree-close':'tree-open'">
    </span>
    <slot name="content" :data="data">
      {{data.name}}
    </slot>
    <div style="padding-left: 25px;" v-show="!data.expanded">
      <slot></slot>
    </div>
  </div>
</template>
<script>
  export default {
    props: {
      data: Object,
      parent: Array
    },
    data(){
      return{
        tt: Object
      }
    },
    mounted () {
      this.init()
    },
    watch: {
    },
    methods: {
      init(){
        console.log(this.data,'children');
        if (this.data.children){
          for (let i=0;i<this.data.children.length; i++) {
            this.expand(this.data.children[i]);
            this.$set(this.data.children[i], 'parent', {name:this.parent[0].name,id:this.parent[0].id,children:this.data.children})
            this.expand(this.data.children[i].parent)
          }
        }
      },
      expand(data, expanded){
        //          给parent加折叠
        if (expanded === undefined) {
          this.$set(data, 'expanded', !data.expanded);
        }else {
          this.$set(data, 'expanded', expanded)
        }
        //  给children加折叠,并且当前节点的expanded变成true
        if(data.children){
          for (let i = 0;i<data.children.length;i++){
            this.expand(data.children[i], !data.children[i].expanded)
          }
        }
        this.tt = data;
        this.$emit('node-expanded',data)
    },
    }
  }
</script>
<style scoped>
  .tree-close,
  .tree-open{
    display: inline-block;
    width:14px;
    height:14px;
    text-align: center;
    line-height: 13px;
    border: 1px solid #888888;
    border-radius: 2px;
    background: #FFFFFF;
    float: left;margin-top:4px;
  }
  .tree-open:after{
   content: "-";
  }
  .tree-close:after{
   content: "+";
  }
</style>
